<template>
	<view>
		<view class="cu-list cu-card menu-avatar">
			<view class="cu-item padding" style="min-height: 200rpx;">
				<view class="cu-avatar xl" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view>
				<view class="content padding-left">
					<view class="text-cut">商品名称: 卫衣</view>
					<view class="text-sm flex flex-direction">
						<view class="text-cut">数量: 994</view>
						<view class="text-cut">规格: XL</view>
						<view class="text-cut">使用时间: 2020-08-16 20:12:23</view>
					</view>
				</view>
				<view class="action">
					<view @click="goToPackDetail" class="optionBtn text-df">使用礼包</view>
				</view>
			</view>
			<view class="cu-item padding" style="min-height: 200rpx;">
				<view class="cu-avatar xl" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view>
				<view class="content padding-left">
					<view class="text-cut">商品名称: 卫衣</view>
					<view class="text-sm flex flex-direction">
						<view class="text-cut">数量: 994</view>
						<view class="text-cut">规格: XL</view>
						<view class="text-cut">使用时间: 2020-08-16 20:12:23</view>
					</view>
				</view>
				<view class="action">
					<view class="optionBtn text-df">使用礼包</view>
				</view>
			</view>
			<view class="cu-item padding" style="min-height: 200rpx;">
				<view class="cu-avatar xl" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view>
				<view class="content padding-left">
					<view class="text-cut">商品名称: 卫衣</view>
					<view class="text-sm flex flex-direction">
						<view class="text-cut">数量: 994</view>
						<view class="text-cut">规格: XL</view>
						<view class="text-cut">使用时间: 2020-08-16 20:12:23</view>
					</view>
				</view>
				<view class="action">
					<view class="optionBtn text-df">使用礼包</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			goToPackDetail(){
				uni.navigateTo({
					url:'./giftPacksDetail'
				})
			}
		}
	}
</script>

<style lang="scss">

/deep/.cu-list.menu-avatar>.cu-item .action {
	width: 140rpx;
	text-align: center;
}
.optionBtn{
	color: #fff;
	font-size: 22upx;
	background: #0081ff;
	border-radius: 20upx;
	padding: 4px 0;
}
</style>
